本章学习目标
继续丰富头部组件，重点完成菜单导航系统的布局与交互效果，同时为后续动态表单章节做铺垫。
响应式菜单交互
菜单在不同屏幕宽度下自动调整表现形式：
- 桌面端：侧边栏菜单正常展开显示
- 平板端：屏幕宽度低于阈值时，侧边栏自动折叠为图标模式
- 移动端：屏幕宽度进一步缩小后，菜单完全折叠，点击后展开为全屏抽屉效果
多种导航模式
本章将实现四种菜单导航模式：
| 模式 | 布局方式 | 说明 |
|---|---|---|
| 侧边栏模式 | 左侧固定菜单 | 经典的后台管理布局 |
| 顶部导航模式 | 顶部一级菜单 + 左侧二级菜单 | 混合菜单，选中顶部菜单后左侧显示对应二级菜单 |
| 纯顶部模式 | 仅顶部菜单 | 简洁布局，同时支持响应式折叠 |
| 双栏模式 | 左侧一级菜单（图标+文字） + 二级菜单列 | 选中二级菜单项时高亮显示 |
主题设置扩展
在主题设置抽屉中完成以下配置项：
- 菜单宽度自定义
- 暗黑模式联动
- 菜单背景色关联（选择颜色后左侧菜单同步变化）
学习要点
本章内容看似简单，但实际动手实现时涉及大量细节：菜单状态管理、响应式断点计算、CSS 过渡动画协调、主题变量联动等。这些综合能力的训练是本章的核心价值所在。
↑